<template>
	<view :style="$s.view_color">
		<my-navbar :name="nav_title"></my-navbar>
		<view class="coupon-box">
			<view class="coupon-com">
				<view class="coupon-com-main">
					<view class="coupon-com-main-left" v-if="cp_item.discount_type===1">
						<text class="coupon-com-main-left-small">￥</text>
						<text class="coupon-com-main-left-strong">{{cp_item.discount_money}}</text>
					</view>
					<view class="coupon-com-main-left" v-if="cp_item.discount_type===2">
						<text class="coupon-com-main-left-strong">{{cp_item.discount_rate}}</text>
						<text class="coupon-com-main-left-small">折</text>
					</view>
					<view class="primary-tag">{{cp_item.discount_type_name}}</view>
					<view class="coupon-com-main-right">
						<view class="coupon-com-main-right-name">{{cp_item.title}}</view>
						<view class="coupon-com-main-right-des">{{cp_item.discount_text}} ( {{cp_item.is_over==1?'可叠加':'不可叠加'}} )</view>
						<view class="coupon-com-main-right-des">[ {{cp_item.use_text}} ]</view>
						<view class="coupon-com-main-right-des">有效期：{{cp_item.term_type_name}}</view>
					</view>
					<view class="coupon-com-main-right-ex1" v-if="cp_item.status===0">
						<text>不可用</text>
					</view>
				</view>
				<view class="coupon-com-footer" v-if="butShow">
					<view class="com-button">
						 <button class="my-but-primary" @click="receive(list)">领取优惠券</button>
					</view>
				</view>
			</view>
		</view>
		<view class="get-coupon">
			<avatarGroup
				:urls="cp_item.receive_user"
				size="35"
				gap="0.3"
			></avatarGroup>
			<view>已有{{cp_item.receive_num}}人领取</view>
		</view>
		<view class="coupon-com">
			<view class="coupon-title">使用规则</view>
			<view class="coupon-content u-content">
				<u-parse :content="$c.html_decode(cp_item.content)"></u-parse>
			</view>
		</view>
	</view>
</template>

<script>
	import { mapState } from 'vuex'
	import checkLogin from '@/mixins/loginCheck.js'
	import avatarGroup from "../components/my-avatar-group/my-avatar-group.vue"
	export default {
		components:{
			avatarGroup
		},
		mixins:[checkLogin],
		data() {
			return {
				nav_title:'优惠券明细',
				cid:0,
				cp_item:{},
				isScene:false,
			}
		},
		onLoad(option){
			this.getCouponID(option)
			this.initData()
		},
		onShow(){
			
		},
		computed:{
		},
		methods: {
			initData(){
				this.$u.api.couponInfo({id:this.cid}).then(res=>{
					this.cp_item=res.data
				})
			},
			getCouponID(option){
				let coupon_id=this.$c.getScene(option)
			
				if(coupon_id){				//扫描进入
					this.isScene=true;
					this.cid=coupon_id;
				}else if(option.id){		//跳转进入
					this.isScene=false;
					this.cid=option.id;
				}else{
					this.$c.error('参数有误','index/index');
				}
				this.cid=coupon_id?coupon_id:option.id
			}
		},
		//领取优惠券
		receive(item){
			if(this.butShow){
				this.$u.api.couponReceive({id:item.id}).then(res=>{
					this.$c.success('领取成功！')
				})
			}		
		},
	}
</script>

<style lang="scss">
	@import "@/static/css/coupon.css";
	.coupon-title{
		font-size: 28rpx;
		line-height: 80rpx;
		height: 80rpx;
		padding-left: 30rpx;
		border-bottom: 1rpx solid #E6E7EB;
	}
	.get-coupon{
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		font-size: 28rpx;
		padding: 20rpx;
		border-bottom: 1rpx solid #E6E7EB;
	}
</style>
